<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="show"
      :before-close="editCancel"
      width="40%"
    >
      <div class="formBox">
        <div class="formHead">监测点{{ myTitle }}</div>
        <div class="formWhite">
          <div class="left"><span class="red">*</span>点位号</div>
          <div class="right">
            <el-input
              v-model="submitForm.id"
              placeholder="请输入"
              size="small"
              :disabled="true"
            ></el-input>
          </div>
        </div>
        <div class="formGray">
          <div class="left"><span class="red">*</span>所属项目</div>
          <div class="right">
            <el-input
              v-model="submitForm.projectName"
              placeholder="请输入"
              size="small"
              :readonly="true"
              :disabled="detailDis"
              @click.native="openProject"
            ></el-input>
          </div>
        </div>
        <div class="formWhite">
          <div class="left"><span class="red">*</span>监测公司</div>
          <div class="right">
            <el-input
              v-model="submitForm.monitorName"
              placeholder="请输入"
              size="small"
              :disabled="true"
            ></el-input>
            <!-- <el-select
              v-model="submitForm.monitorId"
              size="small"
              placeholder="请选择"
              :disabled="true"
              @change="changeItem"
            >
              <el-option
                v-for="item in jcCompanyList"
                :key="item.monitorId"
                :label="item.monitorName"
                :value="item.monitorId"
              ></el-option>
            </el-select> -->
          </div>
        </div>
        <div class="formGray">
          <div class="left"><span class="red">*</span>经纬度</div>
          <div class="right">
            <el-input
              v-model="submitForm.location"
              placeholder="请输入"
              size="small"
              disabled
            ></el-input>
          </div>
        </div>
        <div class="formWhite">
          <div class="left"><span class="red">*</span>所属白蚁防治公司</div>
          <div class="right">
            <el-input
              v-model="submitForm.controlName"
              placeholder="请输入"
              size="small"
              :disabled="true"
            ></el-input>
          </div>
        </div>
        <div class="formGray">
          <div class="left">中继/IP</div>
          <div class="right">
            <el-input
              v-model="submitForm.relay"
              placeholder="请输入"
              size="small"
              :disabled="detailDis"
            ></el-input>
          </div>
        </div>
        <div class="formWhite">
          <div class="left">RSSI</div>
          <div class="right">
            <el-input
              v-model="submitForm.rssi"
              placeholder="请输入"
              size="small"
              :disabled="detailDis"
            ></el-input>
          </div>
        </div>
        <div class="formGray">
          <div class="left">SNR</div>
          <div class="right">
            <el-input
              v-model="submitForm.snr"
              placeholder="请输入"
              size="small"
              :disabled="detailDis"
            ></el-input>
          </div>
        </div>
        <div class="formWhite">
          <div class="left">电压</div>
          <div class="right">
            <el-input
              v-model="submitForm.voltage"
              placeholder="请输入"
              size="small"
              :disabled="detailDis"
            ></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="editSure"
          size="small"
          v-if="myTitle == '编辑'"
          >确定</el-button
        >
        <el-button type="primary" plain @click="editCancel" size="small"
          >取消</el-button
        >
      </span>
    </el-dialog>

    <!-- 右侧抽屉：项目选择占位 -->
    <el-drawer
      title="选择所属项目"
      :visible.sync="projectDrawerVisible"
      direction="rtl"
      size="35%"
      :with-header="true"
      @close="closeProjectDrawer"
    >
      <div style="padding: 10px">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
        >
          <!-- <el-form-item label="状态" prop="runningState">
            <el-select
              v-model="queryParams.runningState"
              placeholder="请选择"
              filterable
              clearable
            >
              <el-option
                v-for="users in statusList"
                :key="users.value"
                :label="users.label"
                :value="users.value"
              />
            </el-select>
          </el-form-item> -->

          <el-form-item label="项目名称" prop="projectName">
            <el-input
              v-model="queryParams.projectName"
              placeholder="请输入"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >查询</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          v-loading="loading"
          :data="assetList"
          border
          stripe
          @selection-change="handleSelectionChange"
          ref="projectTable"
          :key="1"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="序号" align="center" type="index">
          </el-table-column>
          <el-table-column label="项目类型" align="center" prop="projectType" />
          <el-table-column
            label="项目名称"
            align="center"
            show-overflow-tooltip
            prop="projectName"
          />
          <!-- <el-table-column
          label="地址"
          align="center"
          show-overflow-tooltip
          prop="detailAddress"
          min-width="200"
        />
        <el-table-column
          label="所属白蚁防治公司"
          align="center"
          show-overflow-tooltip
          prop="controlId"
          min-width="200"
        />
        <el-table-column
          label="小区物业公司"
          align="center"
          prop=""
          min-width="200"
        />

        <el-table-column label="运行状态" align="center" prop="runningState" />
        <el-table-column
          label="监测点数"
          align="center"
          prop="monitorPointNum"
        /> -->
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
          class="pagination-container"
        />
        <div class="drawer-footer">
          <el-button size="small" @click="closeProjectDrawer">取消</el-button>
          <el-button
            type="primary"
            size="small"
            @click="confirmProjectSelection"
            >确认</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  updatePointMonitor,
  updatePointMonitorNew,
  queryProjectData,
} from "@/api/manage/asset";
import { string } from "tls";
export default {
  name: "addMsg",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    myTitle: {
      type: string,
      default: "",
    },
    detailDis: {
      type: Boolean,
      default: false,
    },
    myForm: {
      default: () => {
        return {
          // id: "",
          // projectName: "",
          // monitorId: "",
          // location: "",
          // controlName: "",
          // relay: "",
          // rssi: "",
          // snr: "",
          // voltage: ""
        };
      },
    },
    jcCompanyList: {
      default: [],
    },
  },
  data() {
    return {
      //   jcCompanyList: []
      submitForm: {
        id: "",
        // projectName: "",
        projectId: "",
        monitorId: "",
        location: "",
        controlName: "",
        relay: "",
        rssi: "",
        snr: "",
        voltage: "",
      },
      // submitForm: {...this.myForm}
      projectDrawerVisible: false,
      loading: false,
      assetList: [],
      total: 0,
      selectedProject: null,
      queryParams: {
        projectName: "",
        runningState: "",
        pageNum: 1,
        pageSize: 10,
      },
      statusList: [
        {
          value: "运行中",
          label: "运行中",
        },
        {
          value: "停止",
          label: "停止",
        },
      ],
    };
  },
  computed: {
    title() {
      return "监测点管理→监测点" + this.myTitle;
    },
  },
  watch: {
    myForm: {
      handler(newVal) {
        console.log(newVal, "newVal");
        this.submitForm = { ...newVal };
      },
      deep: true,
      // immediate: true
    },
  },
  created() {
    this.$nextTick(() => {
      this.submitForm = JSON.parse(JSON.stringify(this.myForm));
    });
    this.getList();
  },
  // mounted() {

  //   console.log(this.myForm, this.submitForm, "submitFormsubmitForm");
  // },
  methods: {
    getList() {
      this.loading = true;
      queryProjectData(this.queryParams)
        .then((res) => {
          if (res.errorCode == "000000") {
            console.log(res, "sssss");
            this.assetList = res.data.list;
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleQuery() {
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleSelectionChange(val) {
      // 单选：始终只保留最后一次勾选的那一行
      if (val && val.length > 1) {
        const last = val[val.length - 1];
        this.$refs.projectTable.clearSelection();
        this.$nextTick(() => {
          this.$refs.projectTable.toggleRowSelection(last, true);
          this.selectedProject = last;
        });
      } else if (val && val.length === 1) {
        this.selectedProject = val[0];
      } else {
        this.selectedProject = null;
      }
    },
    confirmProjectSelection() {
      if (!this.selectedProject) {
        this.$modal && this.$modal.msgWarning
          ? this.$modal.msgWarning("请先选择一个项目")
          : this.$message.warning("请先选择一个项目");
        return;
      }
      this.submitForm.projectId = this.selectedProject.projectId;
      this.submitForm.projectName = this.selectedProject.projectName;
      this.closeProjectDrawer();
    },
    openProject() {
      this.projectDrawerVisible = true;
    },
    closeProjectDrawer() {
      this.projectDrawerVisible = false;
    },
    editSure() {
      if (
        // !this.submitForm.pointNumber ||
        // !this.submitForm.projectName ||
        !this.submitForm.id ||
        !this.submitForm.projectId ||
        // !this.submitForm.monitorId ||
        !this.submitForm.location
        // !this.submitForm.controlName ||
        // !this.submitForm.relay ||
        // !this.submitForm.rssi ||
        // !this.submitForm.snr ||
        // !this.submitForm.voltage
      ) {
        console.log("aaaaaaaaaaa", this.submitForm);

        this.$modal.msgWarning("请完善必填项！");
      } else {
        const data = {
          id: this.submitForm.id,
          projectId: this.submitForm.projectId,
          location: this.submitForm.location,
          relay: this.submitForm.relay,
          rssi: this.submitForm.rssi,
          snr: this.submitForm.snr,
          voltage: this.submitForm.voltage,
        };
        // console.log(this.submitForm, "0000000000");
        updatePointMonitorNew(data).then((res) => {
          console.log(res, "resazs");
          if (res.errorCode == "000000") {
            this.$modal.msgSuccess("操作成功！");
            this.submitForm = {
              id: "",
              projectName: "",
              projectId: "",
              monitorId: "",
              location: "",
              controlName: "",
              relay: "",
              rssi: "",
              snr: "",
              voltage: "",
            };
            this.$emit("closeMsg", true);
          }
        });
      }
    },
    editCancel() {
      this.submitForm = {
        id: "",
        projectName: "",
        // projectId: "",
        monitorId: "",
        location: "",
        controlName: "",
        relay: "",
        rssi: "",
        snr: "",
        voltage: "",
      };
      this.$emit("closeMsg");
    },
    changeItem(val) {
      console.log(val, "0000");
      this.submitForm.monitorName = this.jcCompanyList.find(
        (item) => item.monitorId === val,
      ).monitorName;
    },
  },
};
</script>
<style lang="scss" scoped>
.drawer-footer {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0 0 0;
}
.headerTable {
  background: #5d6d7f;
  height: 48px;
  line-height: 48px;
  text-align: center;
  width: 100%;
  color: #fff;
  font-weight: Bold;
  font-size: 14px;
  font-family:
    Helvetica Neue,
    Helvetica,
    PingFang SC,
    Hiragino Sans GB,
    Microsoft YaHei,
    Arial,
    sans-serif;
  border: 1px solid #e3e3e3;
  border-bottom: 0;
}

.formBox {
  .left {
    display: inline-block;
    height: 44px;
    line-height: 44px;
    width: 140px;
    padding-right: 15px;
    border-left: 1px solid #e4e4dc;
    border-right: 1px solid #e4e4dc;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    color: #303133;
    text-align: right;
    vertical-align: top;
  }
  .right {
    display: inline-block;
    width: calc(100% - 140px);
    height: 44px;
    border-right: 1px solid #e4e4dc;
    padding: 6px 15px;
    .el-select {
      width: 100% !important;
    }
    .el-input {
      width: 100% !important;
    }
  }
  .formHead {
    width: 100%;
    height: 44px;
    background-color: #73879c;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    font-size: 12px;
    color: #ffffff;
  }
  .formWhite {
    width: 100%;
    height: 44px;
    background-color: #fff;
    border-bottom: 1px solid #e4e4dc;
  }
  .area {
    .areaLeft {
      width: 40% !important;
      margin-right: 10px;
    }
    .areaRight {
      width: calc(60% - 10px) !important;
    }
  }
  .formGray {
    width: 100%;
    height: 44px;
    background-color: #eef0f2;
    border-bottom: 1px solid #e4e4dc;
  }
}
.red {
  color: red;
  margin-right: 2px;
  vertical-align: top;
}
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e9e9ec;
}
::v-deep .el-dialog__footer {
  border-top: 1px solid #e9e9ec;
}
::v-deep .el-drawer__header {
  font-size: 18px;
  color: #303133;
  margin-bottom: 20px;
}
::v-deep .el-drawer__body {
  border-top: 1px solid #e9e9ec;
}
</style>
